<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>MathJax v3 with Assistive MML output</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <style>
  mjx-assistive-mml {
      position: absolute !important;
      top: 0px; left: 0px;
      clip: rect(1px, 1px, 1px, 1px);
      padding: 1px 0px 0px 0px !important;
      border: 0px !important;
      display: block !important;
      width: auto !important;
      overflow: hidden !important;
      /*
       *  Don't allow the assistive MathML to become part of the selection
       */
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  mjx-assistive-mml[display="block"] {
      width: 100% !important
  }
  </style>
  <script>
  function addAssistiveMML(math, doc) {
      const adaptor = doc.adaptor;
      //
      // Get the serialized MathML
      //
      const mml = MathJax.startup.toMML(math.root).replace(/\n */g, '').replace(/<!--.*?-->/g, '');
      //
      // Parse it as HTML and retrieve the <math> element
      //
      const mmlNodes = adaptor.firstChild(adaptor.body(adaptor.parse(mml, 'text/html')));
      //
      // Create a container for the hidden MathML
      //
      const node = adaptor.node('mjx-assistive-mml', {
          role: 'presentation', unselectable: 'on', display: (math.display ? 'block' : 'inline')
      }, [mmlNodes]);
      //
      // Hide the typeset math from assistive technology and append the MathML that is visually 
      //   hidden from other users
      //
      adaptor.setAttribute(math.typesetRoot, 'role', 'presentation');
      adaptor.setAttribute(adaptor.firstChild(math.typesetRoot), 'aria-hidden', 'true');
      adaptor.setStyle(math.typesetRoot, 'position', 'relative');
      adaptor.append(math.typesetRoot, node);
  }
  MathJax = {
    //
    //  Use dollar signs for in-line delimiters in addition to the usual ones
    //
    tex: {inlineMath: {'[+]': [['$', '$']]}},
    //
    //  Add a render action for adding the assistive MathML
    //
    options: {
      renderActions: {
        assistiveMML: [155, (doc) => {for (math of doc.math) addAssistiveMML(math, doc)}, addAssistiveMML]
      }
    }
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
</head>
<body>
    <h1>MathJax Assistive MathML</h1>

    <p>
    When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </p>

</body>
</html>